@extends('layouts.appManager')

@section('content')
    <input type="hidden" id="serverId" value="{{$server->id}}">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card panel mb-4">
                    @if(strpos($_SERVER["QUERY_STRING"],'hide=1')===false)
                    <div class="card-header">Lua脚本</div>
                    @endif
                    <div class="card-body ">
                        <div class="text-right">
                            <el-button type="success" size="small" @click="addName()">添加</el-button>
                            <el-button type="success" size="small" @click="reload()">重载模块</el-button>
                        </div>

                        <el-table
                                :data="tableData"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="名称">
                            </el-table-column>
                            <el-table-column
                                    label="状态">
                                <template slot-scope="scope">
                                    {{--<span>@{{ scope.row.type }}</span>--}}
                                    <el-switch
                                            v-model="scope.row.type"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            active-value="lua"
                                            inactive-value="lua-"
                                            @change="change(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="warning" @click="rename(scope.row)">重命名</el-button>
                                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <el-dialog v-if="curItem" title="脚本名称" :show-close="false" :visible.sync="dialogName" :close-on-click-modal="false">
        <el-input v-model="curItem.name" autocomplete="off" minlength="3" maxlength="20" show-word-limit></el-input>
        <small class="text-secondary"> <i class="fas fa-info-circle"></i> 脚本名称必须是中文，英文或者数字；如果脚本名称包含“测试”，则不会在玩家页展示。 </small>
        <div slot="footer" class="dialog-footer">
            <el-button @click="curItem.name=oldName;dialogName=false">取 消</el-button>

            <el-button v-if="curItem.type"  type="primary" @click=" renamedo() ">修 改</el-button>
            <el-button v-else type="primary" @click=" nameToScript() ">下一步</el-button>
        </div>
    </el-dialog>
    <el-dialog class="editor" v-if="curItem"  :show-close="false" :fullscreen="true" :title="(curItem.type?((curItem.type==='lua'?'':'(未启用) ')+'编辑脚本：'):'新增脚本：')+curItem.name" :visible.sync="dialogScript" :close-on-click-modal="false">
        {{--<el-input id="coder" v-model="curItem.script" type="textarea" :rows="15" autocomplete="off"
                  maxlength="60000"
                  show-word-limit></el-input>--}}
        <div id="coder" style="height: 100%"></div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogName=false;dialogScript=false">取 消</el-button>
            <el-button v-if="curItem.type" type="primary" @click="update(0)">保存,关闭</el-button>
            <el-button v-if="curItem.type" type="success" @click="update(1)">保存,重载</el-button>
            <el-button v-else type="primary" @click="add()">保 存</el-button>
        </div>
    </el-dialog>

@endsection
@section('style')
    <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/monaco-editor/0.21.2/min/vs/editor/editor.main.css">
    <style>
        .editor .el-dialog__body{
            padding: 10px 0;
            flex: 1;
        }
        .el-dialog.is-fullscreen{
            display: flex;
            flex-direction: column;
        }
    </style>
@endsection
@section('script')

    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/monaco-editor/0.21.2/min/vs/loader.min.js"></script>
    <script>
        require.config({'vs/nls': {availableLanguages: {'*':'zh-cn'}}});
        require.config({paths: { 'vs': 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/monaco-editor/0.21.2/min/vs' }});

        var app = new Vue({
            el: '#app',
            data: {

                serverId: $('#serverId').val(),
                tableData: [],
                curItem:null,

                dialogName:false,
                dialogScript:false,

                // dialogReName:false,
                oldName:''
            },
            mounted() {
                this.luaList();

            },
            methods:{
                initEdit(val){
                    var t=this;
                    if (t.editor){
                        t.editor.setValue(val);
                        return;
                    }
                    require(['vs/editor/editor.main',], function () {
                        t.editor = monaco.editor.create(document.getElementById('coder'), {
                            value: val,
                            language: 'lua',
                            theme: "vs-dark",
                        });
                        t.editor.onDidChangeModelContent((event) => {
                            t.curItem.script=t.editor.getValue();
                        })
                    });
                },
                luaList(){
                    post('/manager/server/'+this.serverId+'/luaList',{},res=>{
                        console.log(res);
                        this.tableData=res.res;
                    },this)
                },
                addName(){
                    this.curItem={};
                    this.dialogName=true;
                },
                nameToScript(){
                    if (this.curItem.name){
                        var regex = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9]){1,20}$");//不包含“-”
                        var res = regex.test(this.curItem.name);
                        if (res){
                            for (var i = 0; i < this.tableData.length; i++) {
                                if (this.tableData[i].name===this.curItem.name) {
                                    this.$message.error('已存在同名脚本');
                                    return false;
                                }
                            }
                            // this.dialogName=false;
                            this.dialogScript=true;
                            this.initEdit('');
                        }else{
                            this.$message.error('脚本名称只能包含中文,字母或数字');
                        }
                    } else {
                        this.$message.error('请输入脚本名称');
                    }

                },
                add(){
                    post('/manager/server/'+this.serverId+'/luaAdd',this.curItem,res=>{
                        console.log(res);
                        if (res.res.create.msg==='文件创建成功!') {
                            if (res.res.save.msg==='文件已保存!'){
                                this.$message.success('添加成功');
                                this.dialogName=false;
                                this.dialogScript=false;
                                this.luaList();
                            }else{
                                this.$message.error(res.res.save.msg);
                            }
                        }else{
                            this.$message.error(res.res.create.msg);
                        }
                    },this)
                },
                rename(item){
                    this.curItem=item;
                    this.oldName=item.name;
                    this.dialogName=true;
                },
                renamedo(){
                    if (this.curItem.name){
                        if (this.curItem.name===this.oldName) {
                            this.dialogName=false;
                            return;
                        }
                        var regex = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9]){1,20}$");//不包含“-”
                        var res = regex.test(this.curItem.name);
                        if (res){
                            var count=0;
                            for (var i = 0; i < this.tableData.length; i++) {
                                if (this.tableData[i].name===this.curItem.name) {
                                    count++;
                                }
                            }
                            if (count>=2){
                                this.$message.error('已存在同名脚本');
                                return false;
                            }
                            this.dialogName=false;
                            this.curItem.name_old=this.oldName;
                            post('/manager/server/'+this.serverId+'/luaRename',this.curItem,res=>{
                                console.log(res);
                                if (res.res.msg==='重命名成功!') {
                                    this.$message.success('修改成功');
                                }else {
                                    this.$message.error(res.res.msg);
                                }
                            },this);
                        }else{
                            this.$message.error('脚本名称只能包含中文,字母或数字');
                        }
                    } else {
                        this.$message.error('请输入脚本名称');
                    }
                },
                del(item){
                    this.$confirm('此操作将删除该脚本, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        post('/manager/server/'+this.serverId+'/luaDel',item,res=>{
                            console.log(res);
                            if (res.res.msg==='已将文件移动到回收站!'){
                                this.$message.success('删除成功');
                                this.luaList();
                            } else{
                                this.$message.error(res.res.msg);
                            }
                        },this)
                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // });
                    });
                },
                change(item){
                    post('/manager/server/'+this.serverId+'/luaStatus',item,res=>{
                        console.log(res);
                        if (res.res.msg==='重命名成功!') {
                        }else {
                            this.$message.error(res.res.msg);
                        }
                    },this);
                },
                update(flag){
                    post('/manager/server/'+this.serverId+'/luaUpdate',this.curItem,res=>{
                        console.log(res);
                        if (res.res.msg==='文件已保存!') {
                            this.$message.success('更新成功');
                            if (flag){
                                this.reload();
                            } else{
                                this.dialogScript=false;
                            }
                        }else {
                            this.$message.error(res.res.msg);
                        }
                    },this);
                },
                edit(item){
                    this.curItem=item;
                    post('/manager/server/'+this.serverId+'/luaScript',item,res=>{
                        console.log(res);
                        if (res.res.status) {
                            this.curItem.script=res.res.data;
                            this.dialogScript=true;
                            this.initEdit(this.curItem.script);
                            // this.editor.setVal(this.curItem.script);
                        }else {
                            this.$message.error(res.res.msg);
                        }
                    },this);
                },
                reload(){
                    post('/manager/server/'+this.serverId+'/luaReload',{},res=>{
                        console.log(res);
                        this.$message.success('重载成功');
                    },this);
                }
            }
        });
    </script>
@endsection
